.home-body {
  font-family: "PingFang SC";
  .container-fluid-max {
    max-width: 1920px;
  }
  .home-slider {
    width: 100% !important;
    .swiper-button-prev{
      background-image: url("../img/baimu_05.png");
      left: 15%;
    }
    .swiper-button-next {
      background-image: url('../img/baimu_07.png');
      right: 15%;
    }
    .swiper-pagination-bullet {
      width: 8px;
      -webkit-border-radius:50%;
      -moz-border-radius:50%;
      border-radius:50%;
    }
  }
  .home-about-us {
     margin-top: 70px;
     .home-about-us-content {
       padding: 120px 70px;
       background-size: 100% 100% !important;
       height: 603px;
       color: white;
       font-size: 16px;
       .article-content {
         text-indent: 20px;
         letter-spacing: 3px;
         line-height: 30px;
         text-align: center;
         margin-top: 45px;
         font-weight: 200;
       }
       .article-title {
         a {
           color: white;
         }
         span {
           font-size: 18px;
         }
       }
       .label-button-point {
         margin-top: 50px;
       }
     }
     .about-content {
       position: relative;
       .about-us-background {
         position: absolute;
         top: 0;
         z-index: -1;
         left:auto;
       }
     }
   }

  .home-case-show {
    margin-top: 88px;
    @media (min-width: 1300px) {
      .home-case-line {
        margin-left: 6%;
      }
    }
    .home-cass-tab{
      .home-cass-tab-nav {
        font-size: 24.2px;
        list-style-type: none;
        li {

          line-height: 84px;
          a{
            display: block;
            width: 50%;
            margin-left: 20%;
            line-height: 25px;
            padding-top: 30px;
            color: #17191c;
            border-top: 5px solid white;
            font-family: 'PingFang SC';
            &:focus{
              text-decoration: none;
            }
            .tab-font {
              font-size: 16px;
            }
          }
          &.active a {
            border-top: 5px solid red;
          }
        }
      }
    }
    .tab-pane {
      border-top: 5px solid #cccccc;
    }
    .case-show-list {
      max-height: 325px;
      li {
        position: relative;
        padding:0;
        .case-show-moudel {
          padding: 12px;
          position: absolute;
          background: #eb001d;

          background-size: cover;
          visibility: hidden;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          .case-content{
            width: 100%;
            height: 100%;
            padding: 40px;
            background-image: url('../img/case-show-border.png');
            background-size: cover;
            color: white;

            .case-content-translation {
              font-size: 35px;
            }
            .case-content-china{
              font-size: 23px;
            }
            .case-content-main{
              font-size: 14px;
              width: 280px;
              margin-top: 20px;
            }
            .case-content-time{
              width: 100%;
              overflow:  hidden;
              padding-left: 0px;
              margin-top: 30px;

              li {
                float: left;
                margin-right: 4px;
                font-size: 12px;
                .block{
                  display: inline-block;
                  width: 10px;
                  height: 10px;
                  background: white;
                  border-radius: 50%;
                  margin-right: 5px;
                }
              }
            }
          }
        }
        &:hover{
          .case-show-moudel {
            visibility: visible;
          }
        }
      }

    }
  }

  .home-new-products {
    margin-top: 88px;
    .products-new-show {
      position: relative;
      overflow: hidden;
      .show-left{
         box-shadow: 0 2px 2px 0  #c3c1c2;
         animation: back-porducts-show 0.5s;
         &:hover{
           animation: products-show 0.5s;
           animation-fill-mode:forwards;
         }
         @keyframes products-show {
           from { box-shadow: 0 2px 2px 0 #c3c1c2;}
           to {box-shadow: 0 20px 20px 1px #c3c1c2;}
         }
         @keyframes back-porducts-show {
           from {box-shadow: 0 20px 20px 1px #c3c1c2;}
           to { box-shadow: 0 2px 2px 0 #c3c1c2;}
         }
         height: 610px;
         padding: 40px 35px;
         background: #e5e9ec;
         .label-default {
           margin-top: 10px;
           font-size: 14px;
           font-weight: 200;
         }
          .show-left-img {
            padding-top: 20px;
          }
         span {
           font-size: $font-nav;
          &.active{
            border-bottom: 2px solid black;
          }
         }

       }

      .show-right {
        padding: 0 15px 0 0;
        .show-right-product-list {
          &.col-md-4{
            padding-right: 0;
          }
          height:325px;
          .show-right-img {
            position: relative;
            background: white;
            padding-top: 20px;
            height: 284px;
            box-shadow: 0 2px 5px 0 #c3c1c2;
            animation: back-porducts-show 0.5s;
            &:hover{
              animation: products-show 0.5s;
              animation-fill-mode:forwards;
              color: $theme-color;
              .label-link {
                color: $theme-color;
                span{
                  background: $theme-color;
                }
              }
              .label-default{
                background: $theme-color;
              }
            }
            @keyframes products-show {
              from { box-shadow: 0 2px 5px 0 #c3c1c2;}
              to {box-shadow: 0 10px 25px 0 #c3c1c2;}
            }
            @keyframes back-porducts-show {
              from {box-shadow: 0 5px 25px 0 #c3c1c2;}
              to { box-shadow: 0 2px 5px 0 #c3c1c2;}
            }
            .label-link {
              margin-top: 10px;
              color: #000;
              padding: 0.2em 1em;
              span {
                background: #000;
              }
            }
            .label-button-point{
              font-weight: 200;
              margin-top: 10px;
              padding: .4em 0;
              &.label-default{
                margin-left: 21%;
              }
            }
          }
        }
      }



      .show-bottom{
        padding: 0;
        margin-bottom: 20px;
        .show-right-product-list {
          margin-top: 30px;
          &.col-md-4{
            padding-left: 5px;
          }
          .show-bottom-img {
            position: relative;
            background: white;
            padding-top: 20px;
            height: 305px;
            box-shadow: 0 2px 5px 0 #c3c1c2;
            animation: back-porducts-show 0.5s;
            &:hover{
              animation: products-show 0.5s;
              animation-fill-mode:forwards;
            }
            @keyframes products-show {
              from { box-shadow: 0 2px 5px 0 #c3c1c2;}
              to {box-shadow: 0 10px 25px 0 #c3c1c2;}
            }
            @keyframes back-porducts-show {
              from {box-shadow: 0 5px 25px 0 #c3c1c2;}
              to { box-shadow: 0 2px 5px 0 #c3c1c2;}
            }


            .content1 {
                position: relative;
                height: 100px;
                width: 100%;
                //background: red;
                .item1,.item2,.item3{
                  position: absolute;
                }
                .item1 {
                  font-size: 16px;
                  width: 180px;
                  text-align: right;
                  a{
                    font-size: 16px;
                  }
                }
                .item2{
                  width: 130px;
                  right: 40px;
                  top: 15px;
                  .label-button-point{
                    width: 100px;
                    padding: .2em 1.5em;
                    font-weight: 200;
                  }
                }

              }
            .content2 {
              position: relative;
              height: 50px;
              width: 100%;
              //background: red;
              .item1,.item2,.item3{
                position: absolute;
              }
              .item1 {
                font-size: 16px;
                width: 180px;
                right: 50px;
                text-align: right;
                a{
                  font-size: 16px;
                }
              }
              .item2{
                width: 130px;
                right: 30px;
                top: 70px;
                .label-button-point{
                  width: 100px;
                  padding: .2em 1.5em;
                  font-weight: 200;
                }
              }

            }
            .content3 {
              position: relative;
              height: 100px;
              width: 100%;
              //background: red;
              .item1,.item2,.item3{
                position: absolute;
              }
              .item1 {
                font-size: 16px;
                width: 180px;
                text-align: left;
                left: 50px;
                a{
                  font-size: 16px;
                }
              }
              .item2{
                width: 130px;
                left: 50px;
                top: 70px;
                .label-button-point{
                  width: 100px;
                  padding: .2em 1.5em;
                  font-weight: 200;
                }
              }

            }
          }

        }
      }



    }
  }

  .our-design {
    .container{
      padding: 0;
    }
    position:  relative;
    height:840px;
    width: 100%;
    background: #000;
    color: white;
    .our-design-title {
      font-size: 26px;
      .subtitle{
        font-size: 14px;
        margin-top: 30px;
        text-align: center;
      }
    }
    .our-design-show{
      padding-top: 20px;
      .show-item {
        height: 586px;
        width: 334px;
        float: left;
        margin-right: 88px;
        position:  relative;
        border: 1px solid #cccccc;
        &:last-of-type{
          margin-right: 0;
        }
        .content{
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          background: rgba(23,25,28,0.7);
          z-index: 100;
          .content-name{
            color: white;
            text-align: center;
            margin-bottom: 5px;
            a{
              color: white;
              font-weight: 200;
              font-size: 16px;
            }
          }
          .content-label{
            font-size: 15px;
            text-align: center;
          }
          .content-main{
            font-size: 15px;
            font-weight: 200;
            text-align: center;
            margin-top: 20px;
            padding: 0 30px;
            font-family: "PingFang SC";
          }
          .content-more {
            margin-top: 100px;
            text-align: center;
            .label-button-point{
              background: #090909;
              width: 100px;
              padding: .2em 1.5em;
              font-weight: 200;
              .left,.right{
                background: $theme-color;
              }
              &:hover{
                background: $theme-color;
              }
            }
          }
        }

        &:hover{
          .img-background{
            display: block;
          }
        }


        .img-background{
          position:  absolute;
          display: none;
          top:0;
          z-index: 10;
          left: 0;
          height: 100%;
          width: 100%;
        }

        .img-circle {
          display: block;
          margin: 80px auto 0 auto;
        }

      }


    }
    .button-prev{
      position: absolute;
      top: 45%;
        left: 7%;
      width: 40px;
      background-image: url('../img/proe.png');
      background-repeat:no-repeat;
      height: 100px;
      z-index: 1000;
      cursor: pointer;
    }
    .button-next{
      position: absolute;
      width: 40px;
      z-index: 1000;
      background-image: url('../img/next.png');
      background-repeat:no-repeat;
      height: 100px;
      top: 45%;
      right: 7%;
      cursor: pointer;
    }
    .button-pagination{
      text-align:  center;
      padding-top: 35px;
      .swiper-pagination-bullet{
        width: 10px;
        height: 10px;
        border: 1px solid white;
        -webkit-border-radius:50%;
        -moz-border-radius:50%;
        border-radius:50%;
        margin-right: 10px;
      }
    }
  }

  .company-status{
    margin-top: 80px;
    .cricle-content{
      margin-top: 58px;
      .cricle-border{
        width: 146px;
        height: 146px;
        margin: 0 auto;
        border: 5px solid #cccccc;
        border-radius: 50%;
        text-align:  center;
        padding-top: 20px;
      }
      .active-cricle{
        border: 5px solid $theme-color;
      }
      .active-cricle-title{
        background: $theme-color;
        color: white;
      }
      .cricle-title{
        padding: 20px 20px;
        position: relative;
        margin: 34px auto;
        width: 250px;
        text-align:  center;
        .angular{
          display: none;
          width: 31px;
          height: 27px;
          content: '';
          background: url("../img/angular.png");
          //background:red;
          position: absolute;
          left: 44%;
          top:-27px;
        }

        .title-main{
          font-size: $font-nav;
          font-weight:700;
          line-height: 26px;
        }
        .title-translate {
          font-size: 14px;

        }
        .title-article{
          position: relative;
          height: 60px;
          overflow: hidden;
          padding-top: 20px;
          padding:20px;
         &:after{
           display: block;
           position: absolute;
           content: '...';
           right: 10px;
           bottom: 0;
         }
        }
      }
    }

  }


}

